<template>
  <div class=''>
     <h2>state:</h2>
     <h2>{{ name }}</h2>
     <h2>{{ age }}</h2>
     <h2>{{ count }}</h2>
     <h2>{{ books }}</h2>
     <h2>-------------------------</h2>
     <h2>getters1</h2>
     <!-- 第一种写法 -->
    <!-- <h2>{{ getbooksData }}</h2>
    <h2>{{ getbigBooks}}</h2> -->

    <!-- 第二种写法 -->
    <h2>getters2</h2>
     <h2>{{ getbooks }}</h2>
    <h2>{{ getbigbooks}}</h2>

    <h2>---------------------------</h2>
    <h2>mutations1</h2>
    <button @click="addy(5)">点击+5</button>
    <button @click="addy(10)">点击+10</button>
    <button @click="addybooks(res)">点击添加books</button>


    <h2>---------------------------</h2>
    <h2>mutations2</h2>
    <button @click="addxcount(5)">点击+5</button>
    <button @click="addxcount(10)">点击+10</button>
    <button @click="addybook(res)">点击添加books</button>
  </div>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
    data() {
    //这里存放数据
      return {
        res:{
            id:5,
            status:true,
            title:'化学'
        }
      };
    },
  //监听属性 类似于data概念
  computed: {
     ...mapState({//mapState只能按下面的写法写
        name:state=>state.findvuex.name,
        age:state=>state.findvuex.age,
        count:state=>state.findvuex.count,
        books:state=>state.findvuex.books
     }),
     //mapGetters有两种写法
    //  ...mapGetters({
    //     getbooksData: 'getbooks',
    //     getbigBooks:'getbigbooks'
    //  })

     ...mapGetters(['getbooks','getbigbooks'])


  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //mapMutations有两种写法
    // ...mapMutations({
    //     addy:'addxcount',
    //     addybooks:'addybook'
    // })

    ...mapMutations(['addxcount','addybook']),

    //mapActions有两种写法
    // ...mapActions({
    //     asyncgetAction2:'asyncgetAction2'
    // })
    ...mapActions(['asyncgetAction2'])

  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.asyncgetAction2(10)
  },
}
</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类

</style>